<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
   <script src="../dev/vendors/vue.js"></script>
   <div id="app">
    <h1 v-if="ok">Yes</h1>
   </div>
  <div id="todo-list-example">
    <input
      v-model="newTodoText"
      v-on:keyup.enter="addNewTodo"
      placeholder="Add a todo"
    >
    <ul>
      <li
        is="todo-item"
        v-for="(todo, index) in todos"
        v-bind:title="todo"
        v-on:remove="todos.splice(index, 1)"
      ></li>
    </ul>
   </div>

  <script>
    // var app = new Vue({
    //   el: '#app',
    //   data: {
    //     ok: true
    //   }
    // })
    Vue.component('todo-item', {
      template: `
        <li>
          {{ title }}
          <button v-on:click="$emit('remove')">X</button>
        </li>
      `,
      props: ['title']
    })
    new Vue({
      el: '#todo-list-example',
      data: {
        newTodoText: '',
        todos: [
          'Do the dishes',
          'Take out the trash',
          'Mow the lawn'
        ]
      },
      methods: {
        addNewTodo: function () {
          this.todos.push(this.newTodoText)
          this.newTodoText = ''
        }
      }
    })
  </script>
</body>
</html>